<template>
    <div>
    <div v-if="data.is_display" style="position: relative;" class=" guanggao_box" :style="'height:'+data.height+'px'">
        <img :src="item.thumb" v-for="(item,index) in data.list.slice(0,4)" :key="index" :class="data.list.length>3&&index>1?'si':'san'" 
        :style="'padding:'+data.margin_thumb+'px;border-radius:'+data.img_radius+'px'"/>
    </div>
    <div v-if="!data.is_display||data.list.length>4">
        <div v-for="(value,i) in Math.ceil((data.is_display?data.list.slice(4):data.list).length/(data.column+1))" :key="i" style="position: relative;" class=" guanggao_box" :style="'height:'+data.height+'px'">

            <div v-for="(item,index) in (data.is_display?data.list.slice(4):data.list).slice(i*(data.column+1),(i+1)*(data.column+1))" :key="index">
            <img :src="item.thumb"  :style="{width:100/(data.column+1)+'%',height:data.height+'px','padding':data.margin_thumb+'px',borderRadius:data.img_radius}" />
        </div>
        </div>
    </div>
    
    </div>
</template>

<script>

    export default {
        props:['data'],
        name: 'ItemActivity',
        data(){
            return{
            }
        }
     
	
    }
</script>

<style >
.flex{
  display: flex;
  flex-wrap: wrap;
}
.guanggao_box img{
    float: left
}
.guanggao_box .san:nth-child(1){
    width: 50%;
    height: 100%;
}
.guanggao_box .san:nth-child(2){
    width: 50%;
    height: 50%;
}
.guanggao_box .san:nth-child(3){
    width: 50%;
    height: 50%;
}
.guanggao_box .si:nth-child(3){
    width: 25%;
    height: 50%;
}
.guanggao_box .si:nth-child(4){
    width: 25%;
    height: 50%;
}

</style>
